"use strict";

import React, {Component} from "react" ;
import {connect} from "react-redux" ;
import {Link, browserHistory} from "react-router" ;
import {mapStateToProps, mapDispatchToProps} from "./FilmDetailRedux" ;
import UrlManager from "../../../utils/UrlManager" ;
import NetworkEngine from "../../../utils/NetworkEngine" ;
import FilmCreator from "./FilmCreator/FilmCreator" ;
import FilmComment from "./FilmComment/FilmComment" ;
import FilmVideo from "./FilmVideo/FilmVideo";
import OtherFilms from "./OtherFilms/OtherFilms";
import FilmDescription from "./FilmDescription/FilmDescription";
import ErrorBar from "../../../components/Public/ErrorBar/ErrorBar" ;

//style
import "../App.scss" ;
import "./FilmDetail.scss"

import dianzanhover from "../../../static/img/h5/dianzanhover.png";
import dianzangary from "../../../static/img/h5/dianzangary.png";
import wxshare from "../../../static/img/h5/wxshare.png";
import shareModal from "../../../static/img/h5/shareModal.png";

var weixinUrl = location.href.split('#')[0];

class FilmDetailContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            VideoUrl: "",
            likeNum: 0,
            typeVideo: "",//0连接
            time: "",
            content: "",
            message: "",
            commentId: "",
            userId: "",
            views: "",
            textAreaType: "0",//0 是评论框 1是回复框
            video320: "",
            video480: "",
            video720: "",
            title: "",
            introduction: "",
            videoImgUrl: "",
            myId: "",
            commentParam : null,//评论回复极验证参数

        };
        this.getSomeValue = this.getSomeValue.bind(this);
        this.fresh = this.fresh.bind(this);
        this.showAttentionTip = this.showAttentionTip.bind(this);
        this.newCommentList = this.newCommentList.bind(this)
    }

    newCommentList() {
        // alert("最后")
        this.getAllReply();
        this.initialVideo()

        this.initialFilmComment()
        this.initialFilmCommentTwo()

    }

    reply() {
        let userId = sessionStorage.getItem("id");
        if (userId === null || userId === "") {
            var fileNameArr = window.location.href;
            fileNameArr = fileNameArr.split("/");
            let suffix = fileNameArr[fileNameArr.length - 1];
            localStorage.setItem("useFilmId", suffix)
            browserHistory.push("/login")
        } else {
            let con = $(this.refs.comment).val();
            // alert(con)
            if (con == "") {
            } else {
                let urlManager = new UrlManager();
                let param = {
                    commentId: this.state.commentId,
                    replyUserId: sessionStorage.getItem("id"),
                    beReplyUserId: this.state.userId,
                    userKeyId: sessionStorage.getItem("userKeyId"),
                    content: con,
                    geetestForm: {gtServerStatus: 2}
                }
                NetworkEngine(
                    "post",
                    urlManager.reply(), param
                ).then(
                    data => {

                        this.state.captchaObj.reset();
                        if (data.data.status === '1' && data.data.error_message) {
                            //失败 报错
                            this.showErrorBar(data.data.error_message);
                        } else if (data.data.status === '-1') {
                            this.state.commentParam = param;
                            //评论需要极验证
                            $(this.refs.geetestCommentBox).show();
                            this.state.checkType = 'revert';
                            // $('.geetest_btn').click();
                        } else {
                            $(this.refs.comment).val("");
                            this.setState({
                                textAreaType: "0"
                            })
                            $(this.refs.comment).attr("placeholder", "")
                            $(this.refs.num).text(300)
                            this.getAllReply();

                            this.initialFilmComment();
                            this.initialFilmCommentTwo()

                            let id = "#" + this.state.commentId;

                            setTimeout(
                                function () {
                                    $(id).click();
                                }, 1000
                            );
                        }
                    }
                )
            }

        }
    }

    //回复 onSuccess事件内调用
    revertCommentFunGt(verifyObj) {
        let gtParam = {
            clientType :  "h5",
            clientIp :  this.state.clientIp ? this.state.clientIp : null,
            fnGeetestChallenge :  verifyObj.geetest_challenge,
            fnGeetestValidate :  verifyObj.geetest_validate,
            fnGeetestSeccode :  verifyObj.geetest_seccode,
            gtServerStatus :  verifyObj.gtServerStatus,
        }
        this.state.commentParam.geetestForm = gtParam;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.reply(), this.state.commentParam
        ).then(
            data => {
                this.state.captchaObj.reset();
                if (data.data.status === '1' && data.data.error_message) {
                    //失败 报错
                    this.showErrorBar(data.data.error_message);
                } else if (data.data.status === '0') {
                    // 评论提交过多，请进行验证
                    $(this.refs.comment).val("");
                    this.setState({
                        textAreaType: "0"
                    })
                    $(this.refs.comment).attr("placeholder", "")
                    $(this.refs.num).text(300)
                    this.getAllReply();

                    this.initialFilmComment();
                    this.initialFilmCommentTwo()

                    let id = "#" + this.state.commentId;

                    setTimeout(
                        function () {
                            $(id).click();
                        }, 1000
                    );
                }
            }
        )
    }

    cancelLike() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.cancelLike(),
            {
                filmId: this.props.params.id,
                userId: sessionStorage.getItem("id"),
                userKeyId: sessionStorage.getItem("userKeyId")

            }
        ).then(
            data => {
                let _data = data.data;
                if (_data.status === 0) {
                    this.initialDescription();
                    this.initialVideo();

                } else {


                }

            }
        ).catch(
            err => {
            }
        )
    }

    list() {
        var url = window.location.href;
        if (url.indexOf("?") > -1) {
            window.location.href = url.split("?")[0];
            return;
        }
        weixinUrl = weixinUrl.replace(/\//g, '_');
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.shareWeiXin() + "/" + weixinUrl,
        ).then(
            data => {
                this.shareSuccess(data.data)
            }
        ).catch(
            err => {
            }
        )
    }

    shareSuccess(data) {
        let _this = this;
        let title = _this.state.title;
        let videoImgUrl = _this.state.videoImgUrl;
        let des = _this.state.introduction;
        let videoUrl = window.location.href;
        /*---------------微信分享------------------*/
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wxae5b39ca398c9f2f', // 必填，公众号的唯一标识
            // appId: 'wx4002b019d6429df6', // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

            let that = _this;
            wx.onMenuShareTimeline({
                title: data.title, // 分享标题
                link: data.videoUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                //imgUrl: localStorage.getItem("videoImg"), // 分享图标
                imgUrl: data.videoImgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareAppMessage({
                title: data.title, // 分享标题
                desc: data.des, // 分享描述
                link: data.videoUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: data.videoImgUrl, // 分享图标
                type: 'video', // 分享类型,music、video或link，不填默认为link
                dataUrl: data.videoUrl, // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        });
        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    }

    componentWillMount() {
        this.getAllReply()

        this.initialViews();
        this.initialCreator();
        this.initialFilmComment();
        this.initialFilmCommentTwo();
        this.initialVideo();
        this.initialOtherFilms();
        this.initialDescription();

    }

    componentDidMount() {
        this.Wxshare();
        this.list();
        if (sessionStorage.getItem("id") == "" || sessionStorage.getItem("id") == null) {
            $(this.refs.publishFrame).hide();
            $(this.refs.hintFrame).show();
        } else {
            $(this.refs.publishFrame).show();
            $(this.refs.hintFrame).hide();
        }
        this.state.clientIp = window.location.hostname;
        this.initGeetestFun();
    }

    //初始化极验证
    initGeetestFun() {
        const _this = this;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.initGeetest(),
            {
                userId: sessionStorage.getItem("id") ? sessionStorage.getItem("id") : "",
                clientType: "h5",
                clientIp: this.state.clientIp ? this.state.clientIp : null,
            }
        ).then(
            data => {
                let gtServerStatus = data.data.res.gt_server_status;
                let responseStr = data.data.res.responseStr;
                let geetestData = JSON.parse(responseStr);
                initGeetest({
                    gt: geetestData.gt,
                    challenge: geetestData.challenge,
                    new_captcha: geetestData.new_captcha, // 用于宕机时表示是新验证码的宕机
                    offline: !geetestData.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                    product: 'float',
                    width: "180px",
                    // bg_color:"custom",
                    // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
                }, function (captchaObj) {
                    _this.state.captchaObj = captchaObj;
                    // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
                    captchaObj.appendTo("#captchaComment");

                    captchaObj.onReady(function () {
                        $("#waitComment").hide();
                    });

                    captchaObj.onSuccess(function(){
                        let result = captchaObj.getValidate();
                        result.gtServerStatus = gtServerStatus;
                        $(_this.refs.geetestCommentBox).hide();
                        if (_this.state.checkType === 'revert') {
                            //回复验证
                            _this.revertCommentFunGt(result);
                        } else if (_this.state.checkType === 'insert') {
                            //评论验证
                            _this.publishCommentGt(result);
                        }
                    });
                });
            }
        ).catch(
            err => {

            }
        )
    }

    //展示提交失败信息
    showErrorBar(messageWord){
        this.setState({showError:true,errorWord:messageWord});
        setTimeout(()=>{this.setState({showError:false,errorWord:''})},3000);
    }

    initialViews() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.increaseViews(), {
                "filmId": this.props.params.id,
                "userId": sessionStorage.getItem("id"),
                "userKeyId": sessionStorage.getItem("userKeyId"),
            }
        ).then(
            data => {
                this.props.initialVideo();
            }
        )
    }

    initialOtherFilms() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.otherFilms() + `/${this.props.params.id}`,
        ).then(
            data => {
                this.props.initialOtherFilms(data.data.data);
            }
        )
    }

    initialDescription() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.filmDescription(),
            {
                "filmId": this.props.params.id,
                "userId": sessionStorage.getItem("id"),
                "userKeyId": sessionStorage.getItem("userKeyId")

            }
        ).then(
            data => {
                this.props.initialDescription(data.data.data);
                this.props.initialLogo(data.data.data);
                this.state.videoImgUrl = data.data.data.videoImgUrl;
                this.state.introduction = data.data.data.introduction;
                this.state.title = data.data.data.title;

                $("#shareTitle").val(data.data.data.title);
                $("#shareVideoUrl").val(window.location.href);
                $("#shareVideoImg").val(data.data.data.videoImgUrl);
                $("#shareDes").val(data.data.data.introduction);
            }
        ).catch(
            err => {

            }
        )
    }

    initialVideo() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.filmVideoUrl() + `/${this.props.params.id}`,
        ).then(
            data => {
                let _data = data.data.data;
                let videoUrl = _data.video;
                this.setState({
                    VideoUrl: videoUrl,
                    video320: "http://testcdn.keelean.com/" + _data.video320,
                    video480: "http://testcdn.keelean.com/" + _data.video480,
                    video720: "http://testcdn.keelean.com/" + _data.video720,
                })
                let vi = _data.video;
                let views = _data.views;
                this.setState({
                    views: views
                })
                if (_data.filmType === "0") {
                    this.setState({
                        typeVideo: 1
                    })
                    this.ponentDidMount();
                } else if (_data.filmType === "1") {
                    this.setState({
                        typeVideo: 0
                    });
                    if (vi.indexOf("aixifan") > 0 || vi.indexOf("hdslb") > 0) {
                        $(this.refs.videoTip).show();
                    } else {
                        $(this.refs.videoTip).hide();
                        $(this.refs.native).html(vi);
                    }
                } else {
                    this.setState({
                        typeVideo: 1
                    })
                    this.ponentDidMount();
                }
                this.setState({
                    likeNum: _data.likeNum,
                })

                this.props.initialVideo(_data);
            }
        )
    }

    initialCreator() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.filmDetailGetCreator(),
            {
                "filmId": this.props.params.id,
                "userId": sessionStorage.getItem("id"),
                userKeyId: sessionStorage.getItem("userKeyId")

            }
        ).then(
            data => {
                if (data.data.status === "0") {
                    this.props.initialCreator(data.data.data);
                }
            }
        ).catch(
            err => {

            }
        )
    }

    getAllReply() {
        let urlManager = new UrlManager();

        NetworkEngine(
            "post",
            urlManager.findAllReply(), {
                "filmId": this.props.params.id,
                userKeyId: sessionStorage.getItem("userKeyId")
            },
        ).then(
            data => {
                let _data = data.data.data;
                this.props.initialFuifu(data.data);
            }
        ).catch(
            err => {

            }
        )
    }

    ponentDidMount() {
        var videoObject = {
            container: "#video_ele",
            variable: "player",
            volume: 0.6,
            poster: "", //封面图片地址
            autoplay: false, //是否自动播放，默认true=自动播放，false=默认暂停状态
            loop: false, //是否循环播放，默认false=不需要,true=需要
            live: false, //是否是直播，默认false=点播放，true=直播
            loaded: "loadedHandler", //当播放器加载后执行的函数
            seek: 0, //默认需要跳转的时间
            drag: "start", //在flashplayer情况下是否需要支持按关键帧拖动，不需要留空，需要请填写拖动时请求的属性，本例中使用start，如果需要强制按时间点拖动则增加前缀time_，本例中即time_start，如果需要强制按关键帧进行拖动，则前缀是frames_，本例中即：frames_start
            front: "", //前一集按钮点击触发函数，即点击前一集时调用的函数名称，默认为空
            next: "", //下一集按钮点击触发函数，即点击下一集时调用的函数名称，默认为空
            flashplayer: false,//强制使用flashplayer
            html5m3u8: true,//是否使用hls，默认不选择，如果此属性设置成true，则不能设置flashplayer:true,
            track: [
                {
                    kind: "subtitles",
                    label: "English",
                    srclang: "en",
                    src: "res/zm/cs.vtt",
                    default: true
                },
                {
                    kind: "subtitles",
                    label: "中文",
                    srclang: "zn",
                    src: "res/zm/cs2.vtt",
                    default: false
                },
            ],//系统内置字幕轨道，目前大部分浏览器都不支持
            chtrack: {
                src: "srt.srt",
                charset: "utf-8"
            },//chplayer使用的字幕文件及编码
            preview: {
                src: ["screenshot/mydream_en1800_1010_01.jpg", "screenshot/mydream_en1800_1010_02.jpg"],
                scale: 2
            },//预览图片地址数组，src=图片地址数组，scale=图片截取时间间隔，单位：秒
            debug: false,//是否开启调试模式，默认false，不开启
            video: [
                [this.state.video320, "video/mp4", "标清", 10],
                [this.state.video480, "video/mp4", "高清", 100],
                [this.state.video720, "video/mp4", "超清", 20]
            ]//视频地址数组。视频地址可以分多种形式，具体在下面会有详细介绍
        };
        var player = new chplayer(videoObject);
    }

    initialFilmComment() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.filmGetCommentFirst(),
            {
                "filmId": this.props.params.id,
                "userKeyId": sessionStorage.getItem("userKeyId")
            },
        ).then(
            data => {
                this.props.initialComment(data.data.data);
            }
        ).catch(
            err => {
            }
        )
    }

    initialFilmCommentTwo() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.filmGetCommentTwo(),
            {
                "filmId": this.props.params.id,
                "userKeyId": sessionStorage.getItem("userKeyId")
            },
        ).then(
            data => {
                this.props.initialCommentTwo(data.data.data);
            }
        ).catch(
            err => {
            }
        )
    }

    dianZan() {
        if (sessionStorage.getItem("id") == "" || sessionStorage.getItem("id") == null) {
            // $("#closeFrame").show()
            var fileNameArr = window.location.href;
            fileNameArr = fileNameArr.split("/");
            let suffix = fileNameArr[fileNameArr.length - 1];
            localStorage.setItem("useFilmId", suffix)
            browserHistory.push("/Login");
        }
        else {
            let urlManager = new UrlManager();
            NetworkEngine(
                "post",
                urlManager.like(),
                {
                    filmId: this.props.params.id,
                    userId: sessionStorage.getItem("id"),
                    userKeyId: sessionStorage.getItem("userKeyId")

                }
            ).then(
                data => {
                    let _data = data.data;
                    if (_data.status === 0) {
                        // $(".dianzan").attr("src", dianzanhover);
                        this.initialVideo();

                        this.initialDescription();


                    } else {
                        // $(".alertTip").text("今日点赞次数已达上限");
                        // $("#alertTipId").show();
                        // this.alertTipId();
                    }
                }
            ).catch(
                err => {
                }
            )
        }
    }

    go2publishCommentPage() {
        //判断如果没有登录  发表评论的时候去登录页面
        let userId = sessionStorage.getItem("id");
        if (userId === null || userId === "") {
            var fileNameArr = window.location.href;
            fileNameArr = fileNameArr.split("/");
            let suffix = fileNameArr[fileNameArr.length - 1];
            localStorage.setItem("useFilmId", suffix);
            browserHistory.push("/login")
        } else {
            this.publishComment();
        }
    }

    publishComment() {
        let content = this.refs.comment.value;
        if (content.trim() == "") {
        } else {
            let urlManager = new UrlManager();
            let param = {
                content: content,
                userId: sessionStorage.getItem("id"),
                filmId: this.props.params.id,
                userKeyId: sessionStorage.getItem("userKeyId"),
                geetestForm : {gtServerStatus: 2}

            }
            NetworkEngine(
                "post",
                urlManager.saveComment(),param
            ).then(
                data => {
                    this.state.captchaObj.reset();
                    if (data.data.status === '1' && data.data.error_message) {
                        //失败 报错
                        this.showErrorBar(data.data.error_message);
                    } else if (data.data.status === '-1') {
                        // 评论提交过多，请进行验证
                        this.state.commentParam = param;
                        //评论需要极验证
                        $(this.refs.geetestCommentBox).show();
                        this.state.checkType = "insert";
                        // $('.geetest_btn').click();
                    } else {
                        this.getAllReply()

                        this.initialFilmComment()
                        this.initialFilmCommentTwo()

                        this.initialVideo();

                        this.refs.comment.value = "";
                        $(this.refs.num).text(2000)
                    }
                }
            )
        }
    }

    //插入评论极验证 onSuccess 事件内调用
    publishCommentGt(verifyObj){
        let gtParam = {
            clientType :  "h5",
            clientIp :  this.state.clientIp ? this.state.clientIp : null,
            fnGeetestChallenge :  verifyObj.geetest_challenge,
            fnGeetestValidate :  verifyObj.geetest_validate,
            fnGeetestSeccode :  verifyObj.geetest_seccode,
            gtServerStatus :  verifyObj.gtServerStatus,
        }
        this.state.commentParam.geetestForm = gtParam;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.saveComment(),this.state.commentParam
        ).then(
            data => {
                this.state.captchaObj.reset();
                if (data.data.status === '1' && data.data.error_message) {
                    //失败 报错
                    this.showErrorBar(data.data.error_message);
                } else if (data.data.status === '0') {
                    this.getAllReply()

                    this.initialFilmComment()
                    this.initialFilmCommentTwo()

                    this.initialVideo();

                    this.refs.comment.value = "";
                    $(this.refs.num).text(2000)
                }
            }
        )
    }

    showLength() {
        let text = $(this.refs.comment).val();//textarea的内容
        let left = 2000 - text.length;//剩余字数
        let num = $(this.refs.num).text(left);//还可以输入的字数
    }

    TextareaMessage = React.createClass({
        render: function () {
            return (<textarea className="p-content" ref="comment" onChange={this.showLength.bind(this)}
                              maxLength={2000} placeholder={this.state.message}></textarea>
            )
        }
    });

    //取出数据
    getSomeValue(userId, commentId, nickName) {
        $(window).scrollTop($(this.refs.comment).offset().top - 20);
        $(this.refs.comment).focus();
        $(this.refs.comment).attr("placeholder", "回复" + nickName)
        this.setState({
            "userId": userId,
            "commentId": commentId,
            "textAreaType": "1"
        });
    }

    fresh() {
        this.initialCreator();
    }

    sina() {
        document.getElementById("xinlang").click();
    }

    kongjian() {
        document.getElementById("qqspace").click();
    }

    qq() {
        document.getElementById("qq").click();
    }

    weixin() {
        document.getElementById("weixin").click();
    }

    wxshare() {
        var u = navigator.userAgent.toLocaleLowerCase();
        $(".shareModal").show();
        if (u.indexOf('android') > -1) {
            $(".player-img").hide();
        }
        $(".shareModal").click(function () {
            $(".shareModal").hide();
            $(".player-img").show();
        })
    }

    showAttentionTip() {
        $("#attention").show()
        setTimeout(function () {
            $("#attention").hide()
        }, 1500)
    }

    //隐藏
    alertTipId() {
        setTimeout(function () {
            $("#alertTipId").hide();
        }, 2000)
    }

    miniLogin() {
        $("#closeFrame").show()
    }

    //微信浏览器显示分享
    Wxshare() {
        let sUserAgent = navigator.userAgent.toLowerCase();
        let bIsWX = sUserAgent.match(/MicroMessenger/i) == "micromessenger";
        if (bIsWX) {
            $(".wxshare-div").show();
        } else {
            $(".wxshare-div").hide();
        }
    }

    loginIn() {
        var fileNameArr = window.location.href;
        fileNameArr = fileNameArr.split("/");
        let suffix = fileNameArr[fileNameArr.length - 1];
        localStorage.setItem("useFilmId", suffix);
        browserHistory.push("/Login");
    }

    render() {
        const data = this.props.filmDetailDescription.likeStatus;

        return (

            <div style={{background: "#f8f7f7"}}>
                <div className="shareModal">
                    <img src={shareModal} alt=""/>
                </div>
                <ErrorBar showError={this.state.showError} errorWord={this.state.errorWord}/>
                <div className="form-geetest-modal" ref="geetestCommentBox">
                    <div className="captcha">
                        <p id="waitComment" className="show">正在加载验证码......</p>
                        <div id="captchaComment">
                        </div>
                    </div>
                </div>
                <div className="video-player">
                    {
                        this.state.typeVideo == 0 ? (
                            <div className="player-img" ref="native">
                                <p ref="videoTip" className="videoTip" style={{display: "none"}}>该视频源在手机端暂不支持播放</p>
                            </div>
                        ) : (
                            <div className="player-img" id="video_ele" style={{position: "relative", zIndex: 0}}></div>
                        )
                    }
                    <FilmDescription/>
                    <FilmVideo likeNum={this.state.likeNum}/>
                    <FilmCreator fresh={this.fresh} showAttentionTip={this.showAttentionTip}/>
                    <div className="praise">
                        <div>
                            {
                                data == 3 ? <span></span> : <span>
                                    {
                                        data == 1 ?<span><img src={dianzanhover} className="dianzan"
                                        onClick={this.cancelLike.bind(this)}
                                        alt="取消点赞"/><p>点赞</p></span>
                                        :
                                        <span> <img src={dianzangary} className="dianzan" onClick={this.dianZan.bind(this)}
                                        alt="点赞"/>
                                        <p>点赞</p></span>

                                    }
                                    </span>
                            }
                        </div>
                        <div className="wxshare-div" style={{zIndex: 9999}}>
                            <img src={wxshare} onClick={this.wxshare.bind(this)} alt="分享"/>
                            <p>分享</p>
                        </div>
                    </div>
                </div>
                {/*评论*/}
                <FilmComment
                    getSomeValue={this.getSomeValue} ref="getFresh" newCommentList={this.newCommentList}
                />
                <div className="comments-all">
                    {/*登陆后*/}
                    <div className="comments-area" ref="publishFrame" style={{display: "block"}}>
                        <textarea placeholder={this.state.message} ref="comment"
                                  onChange={this.showLength.bind(this)}></textarea>
                        <div className="btn-group">
                            {this.state.textAreaType == "1" ?
                                <button className="orange-btn" onClick={this.reply.bind(this)}>回复
                                </button>
                                :
                                <button className="orange-btn" onClick={this.go2publishCommentPage.bind(this)}>发送
                                </button>
                            }
                        </div>
                    </div>
                    {/*未登录*/}
                    <p className="none" ref="hintFrame" style={{display: "none"}}><a onClick={this.loginIn.bind(this)}>登录</a>后，可发表评论
                    </p>
                </div>
                <OtherFilms/>
                <input type="hidden" id="shareTitle"/>
                <input type="hidden" id="shareVideoUrl"/>
                <input type="hidden" id="shareVideoImg"/>
                <input type="hidden" id="shareDes"/>
            </div>
        )
    }
}

const FilmDetail = connect(mapStateToProps, mapDispatchToProps)(FilmDetailContainer);

export {FilmDetail as default}
